<template>
  <div>
    <!-- 信息显示与录入 -->
    <Card>
      <div
        style="color: rgba(24, 144, 255, 1); font-size: 16px"
        v-if="assignTitle"
      >
        <Row>
          <i-col span="18">
            <span>计划编号：{{ selection[0].planid }}</span>
            <span style="margin: 10px">保单：{{ tabValue[0] }}</span>
            <span>备注：{{ planremark }}</span>
          </i-col>
        </Row>
        <Divider></Divider>
      </div>
      <span v-if="selection.contno != ''">
        <Tabs
          type="card"
          :animated="false"
          :closable="close"
          @on-tab-remove="tabRemove"
          @on-click="clickTab"
          v-if="tabShow"
        >
          <div v-for="item in count" :key="item">
            <TabPane
              :label="tabLabel[item - 1]"
              :name="item - 1"
              v-if="tabStatus[item - 1]"
            ></TabPane>
          </div>
        </Tabs>
        <!-- 保单对话框 -->
        <Modal
          footer-hide="true"
          :value="aboutPolicy"
          :mask-closable="false"
          @on-visible-change="modalVisibleChange1"
          width="1037"
        >
          <span slot="header" style="color: #fff; font-size: 16px"
            >关联录入</span
          >
          <!-- <Tabs>
            <TabPane label="投保人维度"> -->
          <Table
            :columns="superviseColumns"
            :data="superviseData"
            @on-selection-change="selectionChange"
          >
            <template slot-scope="{ row }" slot="planstatename">
              <span v-if="row.planstatename == '未服务'">
                <Button type="warning" size="small" class="relatedButton">{{
                  row.planstatename
                }}</Button>
              </span>
              <span v-if="row.planstatename == '服务中'">
                <Button type="primary" size="small" class="relatedButton">{{
                  row.planstatename
                }}</Button>
              </span>
              <span v-if="row.planstatename == '已完成'">
                <Button type="success" size="small" class="relatedButton">{{
                  row.planstatename
                }}</Button>
              </span>
            </template>
          </Table>
          <div style="text-align: center; margin-top: 20px">
            <Button type="primary" @click="sureDoWork">确认</Button>
          </div>
          <!-- </TabPane>
            <Button type="primary" slot="extra" @click="relatedDeal">
              <Icon type="md-flash" />批量处理
            </Button>
          </Tabs> -->
        </Modal>
        <!-- 保单信息 -->
        <div class="baseInfo" v-if="assignContNoNotnull">
          <span>
            <Row>
              <i-col span="2">
                <div class="title">续期专员信息</div>
              </i-col>
            </Row>
            <Row>
              <i-col span="6">
                <span class="conLabel">续期专员：</span>
                <span class="conInfo"
                  >{{
                    basicInformation1.name ? basicInformation1.name + "-" : ""
                  }}{{
                    basicInformation1.reagentcode
                      ? basicInformation1.reagentcode
                      : ""
                  }}</span
                >
              </i-col>
              <i-col span="10">
                <span class="conLabel">所属机构：</span>
                <span class="conInfo"
                  >{{
                    basicInformation1.managecomname
                      ? basicInformation1.managecomname + " - "
                      : ""
                  }}{{
                    basicInformation1.managecom
                      ? basicInformation1.managecom
                      : ""
                  }}</span
                >
              </i-col>
              <i-col span="6">
                <span class="conLabel">联系电话：</span>
                <span class="conInfo">{{
                  basicInformation1.mobile ? basicInformation1.mobile : ""
                }}</span>
              </i-col>
            </Row>
          </span>
          <span>
            <Row>
              <i-col span="2">
                <div class="title">业务员信息</div>
              </i-col>
              <i-col span="4">
                <span v-if="agent.agentState">
                  <Button
                    :type="StateType"
                    size="small"
                    style="
                      border-radius: 12px;
                      padding-left: 15px;
                      padding-right: 20px;
                      font-size: 12px;
                      height: 20px;
                    "
                    >{{ agentstateName }}
                  </Button>
                </span>
              </i-col>
            </Row>
            <Row>
              <i-col span="6">
                <span class="conLabel">业务员：</span>
                <span class="conInfo"
                  >{{ agent.agentName ? agent.agentName + "-" : ""
                  }}{{ agent.manageCom ? agent.manageCom : "" }}</span
                >
              </i-col>
              <i-col span="10">
                <span class="conLabel">所属机构：</span>
                <span class="conInfo"
                  >{{ agent.manageComName ? agent.manageComName + "-" : ""
                  }}{{ agent.manageCom ? agent.manageCom : "" }}</span
                >
              </i-col>
              <i-col span="6">
                <span class="conLabel">联系电话：</span>
                <span class="conInfo">{{ agent.mobile }}</span>
              </i-col>
            </Row>
          </span>
          <div class="title">保单信息</div>
          <Row>
            <i-col span="6">
              <span class="conLabel">保单标志：</span>
              <span class="conInfo">{{ cont.contflagname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">期满日：</span>
              <span class="conInfo">{{ cont.paytodate }}</span>
            </i-col>
            <i-col span="6">
              <span
                class="conLabel"
                v-if="
                  this.insuranceType == 'supervise' ||
                  this.insuranceType == 'charge'
                "
                >应交次数：</span
              >
              <span class="conLabel" v-else>已交费次数：</span>
              <span class="conInfo">{{ cont.payyear }}次</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">保费：</span>
              <span class="conInfo">
                {{ cont.paymoney }}元
                <!-- <Tooltip placement="right" v-show="(cont.lastmainmoney+cont.lastsubmoney)!=cont.paymoney">
                  <Icon type="ios-help-circle-outline" style="color: #000" />
                  <div slot="content">
                    <div class="tooltipContent">上期主险保费：{{cont.lastmainmoney}}元</div>
                    <div class="tooltipContent">上期附加险保费：{{cont.lastsubmoney}}元</div>
                  </div>
                </Tooltip> -->
              </span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">主险：</span>
              <span class="conInfo">{{ cont.mainriskname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">主险保费：</span>
              <span class="conInfo">{{ cont.mainpolpaymoney }}元</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险：</span>
              <span class="conInfo">
                {{ subpol1.riskname || "" }}
                <!-- <span v-html="subRisks">{{ subpol }}</span> -->
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险保费：</span>
              <span class="conInfo">{{ cont.totalsubpolmoney }}元</span>
            </i-col>
          </Row>
          <div class="title">投/被保人信息</div>
          <Row>
            <i-col span="6">
              <span class="conLabel">投保人：</span>
              <span class="conInfo">
                {{ customer.appntname }}
                <Tooltip placement="right">
                  <Icon type="ios-help-circle-outline" style="color: #000" />
                  <div slot="content">
                    <span
                      v-for="(item, index) in customer.customerprotrayal"
                      :key="index"
                    >
                      <div class="tooltipContent">{{ item }}</div>
                    </span>
                  </div>
                </Tooltip>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人性别：</span>
              <span class="conInfo">{{ customer.appntsexname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人：</span>
              <span class="conInfo">{{ customer.insuredname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人性别：</span>
              <span class="conInfo">{{ customer.insuredsexname }}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">关系：</span>
              <span class="conInfo">{{ customer.relation }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人电话：</span>
              <span class="conInfo">{{ customer.appntphone }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人电话：</span>
              <span class="conInfo">{{ customer.insuredphone }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系地址：</span>
              <span class="conInfo">{{ customer.appntpostaladdress }}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">银行：</span>
              <span class="conInfo">{{ customer.bankname }}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行卡号：</span>
              <!-- 银行卡号倒数第5-8位显示为“*”号 -->
              <span class="conInfo">{{ customer.bankaccno }}</span>
            </i-col>
          </Row>
          <hr style="margin-bottom: 10px" />
        </div>
      </span>
      <!-- 工作录入 -->
      <div class="workrecord">
        <div class="header" v-if="this.insuranceType != 'problem'">
          <span class="title">回访登记</span>
          <!-- <Button type="default" @click="historyWork">
            历史工作记录
            <Badge :count="historyCount" style="margin-left: 5px"></Badge>
          </Button> -->
        </div>
        <div v-if="this.insuranceType != 'problem'">
          <Row gutter="10">
            <i-col span="3">
              <span class="conLabel">工作时间</span>
            </i-col>
            <i-col span="4">
              <span class="conLabel">工作方式</span>
            </i-col>
            <i-col span="3">
              <span class="conLabel">是否联系成功</span>
            </i-col>
          </Row>
          <Row gutter="10">
            <i-col span="3">
              <span class="conInfo">{{ new Date().getFullYear() + "-" + (new Date().getMonth() + 1).toString() + "-" + new Date().getDate() }}</span>
            </i-col>
            <i-col span="4">
              <Select v-model="form1.worktypeCode">
                <Option
                  v-for="item in selsetvisitBaseMapVO.visitworktype"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}</Option
                >
              </Select>
            </i-col>
            <i-col span="3">
              <Select v-model="form1.successContent">
                <Option
                  v-for="item in selsetvisitBaseMapVO.linksuccessflag"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}</Option
                >
              </Select>
            </i-col>
          </Row>
          <!-- 工作结果 -->
          <div>
            <span class="conLabel">工作结果记录</span>
          </div>
          <div class="workResult">
            <div>
              <textarea
                placeholder="请输入"
                v-model="form1.workResultRecord"
                class="textareaFont"
              ></textarea>
            </div>
            <!-- <div style="padding-top: 10px">
              <div style="display: flex;width: 100%; justify-content: space-around">
                 <Button  class="col-30" size="small" :type="but[3]"  @click="nineClick(3)">已告知客户</Button>
                 <Button  class="col-30" size="small" :type="but[2]"  @click="nineClick(2)">未拨通</Button>
                 <Button  class="col-30" size="small" :type="but[0]"  @click="nineClick(0)">客户挂断电话</Button>
              </div>
              <div style="display: flex;width: 100%; justify-content: space-around">
                <Button  class="col-30" size="small" :type="but[1]" @click="nineClick(1)">联系方式不准确</Button>
              </div> -->
              <div>
              <Button
                :type="but[3]"
                size="small"
                class="col-30"
                @click="nineClick(3)"
                >已告知客户</Button
              >
              <Button
                :type="but[2]"
                size="small"
                class="col-30"
                @click="nineClick(2)"
                >未拨通</Button
              >
              <Button
                :type="but[0]"
                size="small"
                class="col-30"
                @click="nineClick(0)"
                >客户挂断电话</Button
              >
              <Button
                :type="but[1]"
                size="small"
                class="col-30"
                @click="nineClick(1)"
                >联系方式不准确</Button
              >
              <!--  <Button
                :type="but[4]"
                size="small"
                class="col-30"
                @click="nineClick(4)"
                >已通知业务员</Button
              >
             <Button
                :type="but[5]"
                size="small"
                class="col-30"
                @click="nineClick(5)"
                >客户挂断电话</Button
              >
              <Button
                :type="but[6]"
                size="small"
                class="col-30"
                @click="nineClick(6)"
                >已告知客户交费时间及金额</Button
              >
              <Button
                :type="but[7]"
                size="small"
                class="col-30"
                @click="nineClick(7)"
                >联系方式不正确</Button
              >
              <Button
                :type="but[8]"
                size="small"
                class="col-30"
                @click="nineClick(8)"
                >未拨通</Button
              > -->
            </div>
          </div>
          <div class="rePlay">
            <!-- 是否可以自主完成 -->
            <span v-if="ownComplete">
              <RadioGroup
                v-model="form1.chargeRadio"
                @on-change="chargeRadioChange"
              >
                <Radio label="submit">完成工作</Radio>
                <Radio label="replan">下次工作再计划：</Radio>
              </RadioGroup>
              <span class="conLabel"></span>
              <DatePicker
                :editable="false"
                v-model="form1.workReplan"
                :disabled="reDatedisabled"
              ></DatePicker>
              <span class="conLabel" style="margin-left: 20px">工作方式：</span>
              <Select
                v-model="form1.workRetype"
                style="width: 20%"
                :disabled="reDatedisabled"
                clearable
              >
                <Option
                  v-for="item in nextWorkType"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}</Option
                >
              </Select>
            </span>
          </div>
          <div style="padding-top: 30px">
            <Button
              type="primary"
              style="padding-left: 30px; padding-right: 30px"
              @click="workSubmit"
              :loading="workSubmitLoading"
              >提交</Button
            >
          </div>
        </div>
      </div>
    </Card>

    <!-- 通知业务员弹框 -->
    <Modal
      v-model="noticeModal"
      :mask-closable="false"
      footer-hide="true"
      title="通知业务员"
      width="600px"
    >
      <div class="noticeBody">
        <div v-for="item in msgList" :key="item">
          <Row style="margin-bottom: 10px">
            <i-col>发送日期: {{ item.senddate }}</i-col>
          </Row>
          <Row style="margin-bottom: 10px">
            <i-col style="color: rgba(128, 128, 128, 1)">{{
              item.sendcontent
            }}</i-col>
          </Row>
        </div>
        <Row style="margin-bottom: 10px">
          <i-col>
            <Input
              type="textarea"
              :rows="4"
              v-model="noticeMsg"
              placeholder="请输入"
              @on-change="msgChange"
            />
          </i-col>
        </Row>
        <Row>
          <i-col>
            <Button type="primary" :disabled="sendFlag" @click="sendNotice"
              >发送</Button
            >
          </i-col>
        </Row>
      </div>
    </Modal>

    <!-- 操作台 -->
    <Card style="margin-top: 20px" v-if="this.insuranceType != 'problem'">
      <div class="workStation">
        <div class="title">操作台</div>
        <span class="leftMenu">
          <ul>
            <span v-if="assignContNoNotnull">
              <li @click="show(1)" :class="consoleIndex == 1 ? 'active' : ''">
                电话联系
              </li>
              <!-- <li @click="show(2)" :class="consoleIndex == 2 ? 'active' : ''">
                短信联系
              </li> -->
            </span>
            <li @click="show(3)" :class="consoleIndex == 3 ? 'active' : ''">
              网络联系
            </li>
            <!-- <li @click="show(4)" :class="consoleIndex == 4 ? 'active' : ''">
              面访联系
            </li> -->
          </ul>
        </span>
        <div class="phoneContact" v-show="isPhoneContact">
          <div class="first">
            <div class="position">业务员</div>
            <div class="person">
              <div>{{ agent.agentName }}</div>
              <div class="number">{{ agent.mobile }}</div>
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal0">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button
                type="primary"
                @click="callSomeone('0')"
                style="margin-right: 20px"
              >
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv
                ref="callUpload"
                :show-upload-list="false"
                :before-upload="callbeforeUpload"
              >
                <Button type="primary" :loading="callUploadLoading">
                  <Icon
                    ref="callUpload"
                    type="ios-cloud-upload"
                    size="22"
                    style="color: #fff"
                  ></Icon
                  >上传
                </Button>
                <Modal
                  v-model="showModal"
                  title="电话录音上传"
                  @on-ok="uploadOk('callUpload')"
                  @on-cancel="onCancel"
                  :closable="false"
                  :mask-closable="false"
                >
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
          <div class="first">
            <div
              class="position"
              style="background-color: rgba(0, 186, 173, 1)"
            >
              投保人
            </div>
            <div class="person">
              <div>{{ customer.insuredname }}</div>
              <div class="number">{{ customer.appntphone }}</div>
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal1">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button
                type="primary"
                @click="callSomeone('1')"
                style="margin-right: 20px"
              >
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv
                ref="callUpload2"
                :show-upload-list="false"
                :before-upload="callbeforeUpload2"
              >
                <Button type="primary" :loading="callUploadLoading">
                  <Icon
                    type="ios-cloud-upload"
                    size="22"
                    style="color: #fff"
                  ></Icon
                  >上传
                </Button>
                <Modal
                  v-model="showModal2"
                  title="电话录音上传"
                  @on-ok="uploadOk('callUpload2')"
                  @on-cancel="onCancel"
                  :closable="false"
                  :mask-closable="false"
                >
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
          <div class="first">
            <div
              class="position"
              style="background-color: rgba(246, 166, 35, 1)"
            >
              其他
            </div>
            <div class="person">
              <Input v-model="phoneNumber" placeholder="请输入号码" />
            </div>
            <div class="phone gray">
              <div>外地电话</div>
              <div>
                <RadioGroup v-model="isLocal2">
                  <Radio :label="isInnerLine == 'Y' ? '90' : '0'">是</Radio>
                  <Radio :label="isInnerLine == 'Y' ? '9' : ''">否</Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="but callUpload">
              <Button
                type="primary"
                @click="callSomeone('2')"
                style="margin-right: 20px"
              >
                <Icon type="md-call" />拨号
              </Button>
              <Uploadv
                ref="callUpload3"
                :show-upload-list="false"
                :before-upload="callbeforeUpload3"
              >
                <Button type="primary" :loading="callUploadLoading">
                  <Icon
                    type="ios-cloud-upload"
                    size="22"
                    style="color: #fff"
                  ></Icon
                  >上传
                </Button>
                <Modal
                  v-model="showModal3"
                  title="电话录音上传"
                  @on-ok="uploadOk('callUpload3')"
                  @on-cancel="onCancel"
                  :closable="false"
                  :mask-closable="false"
                >
                  <p style="text-align: center; font-size: 18px">
                    是否上传本次通话录音？
                  </p>
                </Modal>
              </Uploadv>
            </div>
          </div>
        </div>
        <Modal
          footer-hide="true"
          :value="callModalShow"
          :mask="false"
          :closable="false"
          @on-visible-change="modalVisibleChange5"
          :draggable="true"
          :scrollable="true"
          width="320"
          title=" "
        >
          <!-- <iframe
            v-if="iframeNeedReloaded"
            src="../../../../static/tel/testconnect.htm"
            id="frame"
            name="frame"
            ref="telIframe"
            style="display:none"
          ></iframe> -->
          <div class="callContent">
            <div class="callHeader1">
              <div class="callHeader2">
                <Icon type="md-person" />
              </div>
            </div>
            <div class="callPerson">
              {{
                callIndex === "0"
                  ? agent.name
                  : callIndex === "1"
                  ? customer.appntname
                  : ""
              }}
            </div>
            <div class="callNum">
              {{
                callIndex === "0"
                  ? agent.mobile
                  : callIndex === "1"
                  ? customer.appntphone
                  : phoneNumber
              }}
            </div>
            <div class="callTime">
              <Icon type="md-call" />
              <span id="time">{{ recordTime }}</span>
            </div>
            <div
              class="callHangup"
              @click="closeCallModel"
              style="cursor: pointer"
            >
              <Icon type="md-call" />
            </div>
          </div>
        </Modal>
        <div class="messageContact" v-show="isMessageContact">
          <div class="message">
            <div
              style="background-color: #fff9f0; margin-bottom: 5px; width: 92%"
            >
              <Icon type="md-alert" style="color: orange; font-size: 18px" />
              {{ remainMessageCount }}
            </div>
            <Row>
              <span>短信通知：</span>
              <Select
                v-model="message.messageToPerson"
                style="width: 20%"
                @on-change="messagePersonChange"
                clearable
              >
                <Option
                  v-for="item in personList"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}</Option
                >
              </Select>
              <span style="margin-left: 20px">短信模板：</span>
              <Select
                v-model="message.messageModel"
                style="width: 20%"
                @on-change="messageModelChange"
                clearable
              >
                <Option
                  v-for="item in modelList"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}</Option
                >
              </Select>
            </Row>
            <div class="messageTitle">短信预览内容</div>
            <div class="messageContent">{{ messagePreveiwContent }}</div>
            <Button
              type="primary"
              style="margin-top: 5px"
              @click="judgeMessageCount"
              :loading="sendMessageLoading"
            >
              <Icon type="ios-paper-plane" style="margin-right: 5px" />发送
            </Button>
          </div>
        </div>
        <div class="internetContact" v-show="isInternetContact">
          <div class="internet">
            <div>网络联系证明</div>
            <Row>
              <i-col span="12">
                <Uploadv
                  multiple
                  ref="upload"
                  type="drag"
                  :before-upload="handleUpload"
                  :show-upload-list="false"
                  :on-success="uploadSuccess"
                  :on-error="uploadFail"
                  :headers="{
                    Authorization: '',
                  }"
                  name="multipartFile"
                  :data="{
                    visitid: $route.query.visitid,
                    contno: $route.query.contno,
                    worktype: 6,
                  }"
                  :action="action1"
                  class="uploadStyle"
                >
                  <Icon
                    type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"
                  ></Icon>
                  <p>点击或将文件拖拽到这里上传</p>
                  <p style="color: rgba(0, 0, 0, 0.43)">
                    支持扩展名：.rar .zip .doc .docx .pdf .jpg...
                  </p>
                </Uploadv>
              </i-col>
              <i-col span="12" class="fileHeight">
                <div v-for="(item, index) in file" :key="index">
                  <div style="margin-top: 10px; margin-left: 20px">
                    <Icon type="md-attach" style="transform: rotate(90deg)" />
                    &nbsp;{{ item.name }}
                    <a href="javascript:;" @click="delectFile(item.keyID)">X</a>
                  </div>
                </div>
              </i-col>
            </Row>
            <Button type="primary" @click="upload" :loading="uploadLoading"
              >确定</Button
            >
          </div>
        </div>
        <div class="internetContact" v-show="isFaceContact">
          <div class="internet">
            <div>面访联系证明</div>
            <Row>
              <i-col span="12">
                <Uploadv
                  multiple
                  ref="upload2"
                  type="drag"
                  :before-upload="handleUpload2"
                  :show-upload-list="false"
                  :on-success="uploadSuccess2"
                  :on-error="uploadFail2"
                  :headers="{
                    Authorization: '',
                  }"
                  name="multipartFile"
                  :data="{
                    planid: '',
                    workid: '',
                    delid: '',
                    controllerType: '',
                  }"
                  :action="action2"
                  class="uploadStyle"
                >
                  <Icon
                    type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"
                  ></Icon>
                  <p>点击或将文件拖拽到这里上传</p>
                  <p style="color: rgba(0, 0, 0, 0.43)">
                    支持扩展名：.rar .zip .doc .docx .pdf .jpg...
                  </p>
                </Uploadv>
              </i-col>
              <i-col span="12" class="fileHeight">
                <div v-for="(item, index) in file2" :key="index">
                  <div style="margin-top: 10px; margin-left: 20px">
                    <Icon type="md-attach" style="transform: rotate(90deg)" />
                    &nbsp;{{ item.name }}
                    <a href="javascript:;" @click="delectFile2(item.keyID)"
                      >X</a
                    >
                  </div>
                </div>
              </i-col>
            </Row>
            <Button type="primary" @click="upload2" :loading="uploadLoading2"
              >确定</Button
            >
          </div>
        </div>
        <div class="clearBoth"></div>
      </div>
    </Card>
    <div
      class="contain"
      ref="mybox"
      style="width: 0; hieght: 0; overflow: hidden"
    >
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas"></canvas>
    </div>
    <!-- 显示图片 -->
    <Modal
      footer-hide="true"
      v-model="handleShowFile"
      width="1200px"
      title="在线预览"
    >
      <img style="width: 100%; height: 100%" :src="biggerPath" alt="" title="如需下载请右击" />
    </Modal>
  </div>
</template>

<script>
import { drawSign } from "../../../util/drawSign";
import axios from "axios";
import Vue from "vue";
import util from "../../../util/util";
import deviceapi from "../../../util/deviceapi";
import { exportFile, visitFile } from "../../../util/util";
// import XLSX from "xlsx";
// import mammoth from "mammoth";
export default {
  data() {
    return {
      file1: "1",
      showModal: false,
      showModal2: false,
      showModal3: false,
      uploadObj: {},
      callWay: "",
      start: "",
      recordTime: "00:00",
      recordTimeStamp: -28800000,
      iframeNeedReloaded: false,
      options3: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      phoneRecord: false,
      phoneCCRecord: false,
      messageContent: false,
      interviewModal: false,
      internetModal: false,
      superiorReview: 0,
      serviceRecord: [],
      serviceRecord2: [],
      count: "",
      selection: "",
      insuranceType: "",
      close: true,
      countCopy: "",
      contCount: "",
      historyCount: "",
      tabLabel: [],
      tabStatus: [],
      tabValue: [],
      tabShow: true,
      assignTitle: false,
      ownComplete: false,
      planremark: "",
      form1: {
        workdate: "",
        worktypeName: "",
        chargeStatus: "",
        chargeDifficult: "",
        chargeDate: "",
        successContent: "",
        visitTogether: "否",
        companyReason: [],
        uerReason: [],
        otherReason: "",
        workResultRecord: "",
        workResultButton: [],
        workReplan: "",
        workRetype: "",
        chargeRadio: "",
        worktypeCode: "",
      },
      // 收费预估状态
      estimatestate: [],
      // 业务员信息
      agent: {
        agentName: "",
        agentstate: "",
        managecom: "",
        mobile: "",
      },
      subpol1: {},
      // 保单信息
      cont: {
        contflagname: "",
        mainpolpaymoney: "",
        mainrisk: "",
        mainriskname: "",
        payCount: "",
        payintv: "",
        paymoney: "",
        paytodate: "",
        subpol: [],
        totalsubpolmoney: "",
      },
      subRisks: "",
      // 投/被保人信息
      customer: {
        appntname: "",
        appntno: "",
        appntphone: "",
        appntpostaladdress: "",
        appntsex: "",
        appntsexname: "",
        bankaccno: "",
        bankcode: "",
        bankname: "",
        customerprotrayal: [],
        insuredname: "",
        insuredno: "",
        insuredphone: "",
        insuredsex: "",
        insuredsexname: "",
        relation: "",
      },
      // 主管陪访
      order: [
        {
          key: "否",
          value: "否",
        },
      ],
      linksuccessflag: [],
      inputSelect: false,
      but: [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
      ],
      nextWorkType: [],
      workSubmitLoading: false,
      phoneNumber: "",
      isPhoneContact: true,
      isMessageContact: false,
      isInternetContact: false,
      isFaceContact: false,
      personList: [],
      modelList: [],
      realTimeDeductionsLoading: false,
      // 短信表单
      message: {
        messageToPerson: "",
        messageModel: "",
      },
      messagePreveiwContent: "",
      sendMessageLoading: false,
      file: [],
      uploadFile: [],
      file2: [],
      uploadFile2: [],
      aboutPolicy: false,
      //表格
      superviseColumns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60,
        },
        {
          title: "保单号",
          key: "contno",
          width: "190",
          fixed: "left",
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "100",
          sortable: true,
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "120",
          sortable: true,
        },
        {
          title: "交次",
          key: "paycount",
          align: "center",
          width: "100",
        },
        {
          title: "交费难度",
          key: "difficulty",
          align: "center",
          width: "120",
          sortable: true,
        },
        {
          title: "应收保费(元)",
          key: "paymoney",
          align: "center",
          width: "140",
          sortable: true,
        },
        {
          title: "宽限期剩余天数",
          key: "restdays",
          align: "center",
          width: "140",
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "150",
          sortable: true,
        },
        {
          title: "计划工作方式",
          key: "worktypename",
          align: "center",
          width: "150",
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "100",
          slot: "planstatename",
        },
      ],
      superviseData: [{}],
      relatedSelection: [],
      historyWorkRecord: false,
      rateValue1: 0,
      isRate: true,
      phoneRecord: false,
      messageContent: false,
      // 工作结果
      workResultList: [
        {
          workResult: "客户明确不交费",
        },
        {
          workResult: "家庭原因",
        },
      ],
      action1: "",
      action2: "",
      credentials: "",
      uploadLoading: false,
      uploadLoading2: false,
      fileIndex1: 0,
      fileIndex2: 0,
      tabIndex: 1,
      consoleIndex: 1,
      chargeRadio: "",
      reDatedisabled: true,
      chargeDifficultDisabled: false,
      couMoneyDisabled: false,
      // 通知业务员
      noticeDisabled: false,
      noticeModal: false,
      msgList: [],
      noticeMsg: "",
      sendFlag: true,
      callBtnDisabled: true, //拨号置灰
      // messageBtnDisabled: false,
      assignContNoNotnull: true,
      remainMessageCount: 0,
      persontype: null,
      callModalShow: false,
      callIndex: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "handleplayOrPause",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      // cc电话录音
      phoneCCRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "200",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [],
      // 短信表格
      messageContentColumns: [
        {
          title: "发送时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "发送对象",
          key: "persionid",
          width: "100",
        },
        {
          title: "发送内容",
          key: "messagecontent",
        },
      ],
      messageContentData: [],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      interviewData: [],
      // 网络联系表格
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      internetData: [],
      userCode: "",
      isLocal0: "9",
      isLocal1: "9",
      isLocal2: "9",

      callTime: "", // 通话时长
      sec: 0, // 秒
      min: 0, // 分
      authorization: "",
      callUploadLoading: false,
      callaction: "",
      callNum: "",
      callflag: "",
      kg: "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",
      recordVOS: [{}, {}],
      problemReview: "",
      isInnerLine: "",
      handleShowFile: false,
      biggerPath: "",
      doworkObj: {},
      excelHtml: "",
      audioUrl: new Audio(),
      audioid: "",
      basicInformation1: {},
      selsetvisitBaseMapVO: {},
      typeFlag: "",
      dataFlag: "",
      agentstateName: "",
      StateType: "",
    };
  },
  methods: {
    // 显示图片
    showFile(row) {
      if (row.ext == "jpg" || row.ext == "png" || row.ext == "jpeg") {
        this.biggerPath = row.photoUrl;
        this.handleShowFile = true;
      } else if (row.ext == "pdf") {
        let type = row.photoUrl.split("type=")[1];
        let obj = {
          id: row.id,
          worktype: type,
        };
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      } else {
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开");
      }
    },
    //播放完毕执行
    overAudio() {
      console.log("播放声音完毕");
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (this.audioid == item.id) {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    //播放
    playOrPause(data) {
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl;
            this.audioid = data.id;
            this.audioUrl.play();
            item.handleplayOrPause = true;
            this.audioUrl.onended = () => {
              this.overAudio();
            };
          } else {
            this.audioUrl.pause();
            item.handleplayOrPause = false;
          }
        } else {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    // 格式错误
    handleFormatError(file) {
      this.callUploadLoading = false;
      this.$Message.info(
        "文件格式错误" + file.name + " 格式错误, 请选择格式为wav"
      );
    },

    // 连接到后端
    calluploadSuccess(response, file, fileList) {
      if (this.callflag === "2" && !this.phoneNumber) {
      } else {
        this.$Message.info(response.msg);
      }
    },

    // 连不到后端的情况
    calluploadFail(response, file, fileList) {
      this.submitLoading = false;
      this.$Message.info("保存失败");
    },
    msgChange() {
      if (this.noticeMsg != "") {
        this.sendFlag = false;
      } else {
        this.sendFlag = true;
      }
    },
    // 通知业务员
    sendNotice() {
      let msgg = {
        workid: this.selection[this.tabIndex].workid,
        operator: this.userCode,
        remark: this.agent.agentcode,
        contno: this.tabValue[0], //保单号
        planid: this.selection[this.tabIndex].planid, //计划编码
        sendcontent: this.noticeMsg, //发送内容
      };
      // console.log(msgg);
      this.api.domessagetoagent(msgg).then((res) => {
        if (res.code == 200) {
          this.noticeModal = false;
          this.noticeMsg = "";
          this.sendFlag = true;
          this.$Message.info("发送信息成功！");
        } else {
          this.$Message.info("发送信息失败！");
        }
      });
    },

    // 查询成功后重置表单
    reset() {
      this.form1.chargeStatus = "";
      this.form1.chargeDifficult = "";
      this.form1.chargeDate = "";
      this.form1.successContent = "";
      this.form1.visitTogether = "";
      this.form1.companyReason = [];
      this.form1.uerReason = [];
      this.form1.otherReason = "";
      this.form1.workResultRecord = "";
      this.form1.workResultButton = [];
      this.form1.workReplan = "";
      this.form1.workRetype = "";
      this.form1.chargeRadio = "";
      let resetBtn = [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
      ];
      this.but = resetBtn;
    },

    // tab移除触发
    tabRemove(name) {
      Vue.set(this.tabStatus, name, false);
      this.countCopy--;
      if (this.countCopy <= 1) {
        this.close = false;
      }
    },

    // tab点击
    clickTab(index) {
      if (this.insuranceType == "problem") {
        this.getProblemInfo();
      } else {
      }
    },

    // 其他理由是否可填
    otherReasonChange(boo) {
      if (boo) {
        this.inputSelect = true;
      } else {
        this.inputSelect = false;
      }
    },

    // 按钮转换颜色
    nineClick(index) {
      let boo = this.but[index] == "default" ? "success" : "default";
      if (
        boo == "success" &&
        !this.form1.workResultButton.includes(index + 1)
      ) {
        this.form1.workResultButton.push(index + 1);
      } else {
        this.form1.workResultButton = this.form1.workResultButton.filter(
          (item) => {
            return item != index + 1;
          }
        );
      }
      Vue.set(this.but, index, boo);
      console.log(this.form1.workResultButton, "this.form1.workResultButton");
    },
    // 督导件、收费件批量处理
    sureDoWork() {
      console.log(this.relatedSelection);
      console.log(this.doworkObj, this.agent);
      let arr = [];
      let arr1 = [];
      let arr2 = [];
      this.relatedSelection.forEach((item) => {
        if (item.planstatename == "已完成") {
          arr.push(item.contno);
        }
        if (
          this.doworkObj.workType == "0" ||
          this.doworkObj.workType == "1" ||
          this.doworkObj.workType == "2" ||
          this.doworkObj.workType == "3"
        ) {
          if (this.agent.agentcode != item.agentcode) {
            arr1.push(item.contno);
          }
        }
        let nowDate = new Date().getTime();
        let nextDate = new Date(this.doworkObj.nextPlandate).getTime();
        let days = nextDate - nowDate;
        if (
          (item.planstatename == "未服务" || item.planstatename == "服务中") &&
          days > item.restdays * 1000 * 60 * 60 * 24
        ) {
          arr2.push(item.contno);
        }
      });
      if (arr.length > 0) {
        this.$Message.info({
          content: arr.join("/") + "工作状态为已完成，不可提交工作记录",
          duration: 5,
        });
        return;
      }
      if (arr1.length > 0) {
        this.$Message.info({
          content:
            arr1.join("/") +
            "保单的业务员与本保单业务员非同一人，工作方式是联系业务员，不可同步关联处理。",
          duration: 5,
        });
        return;
      }
      if (arr2.length > 0) {
        this.$Message.info({
          content: "下次工作再计划日期大于" + arr2.join("/") + "保单的宽限日期",
          duration: 5,
        });
        return;
      }
      this.doworkObj.relationCont = this.relatedSelection;
      this.api.dowork(this.doworkObj).then((res) => {
        if (res.code == 200) {
          this.workSubmitLoading = false;
          this.aboutPolicy = false;
          this.$Message.info(res.msg);
          this.reset();
          this.getTotal(this.$route.query.selection);
        } else {
          this.workSubmitLoading = false;
          this.$Message.info(res.msg);
        }
      });
    },
    // 工作记录提交
    workSubmit() {
      if (this.form1.successContent == "") {
        this.$Message.info("请选择是否联系成功");
        return;
      }
      if(this.form1.worktypeCode == ""){
        this.$Message.info("请选择工作方式");
         return;
      }
      if (
        this.form1.workResultButton.length == 0 &&
        this.form1.workResultRecord == ""
      ) {
        this.$Message.info("请录入工作结果记录");
        return;
      }
      let obj = {
        contno: this.$route.query.contno,
        issuccess: this.form1.successContent === "0" ? "Y" : "N",
        paytodate: this.$route.query.paytodate,
        resultid: this.form1.workResultButton.toString(), //10:已告知客户 9:未拨通 8:联系方式不准确 6:客户挂断电话
        visitid: this.$route.query.visitid, //queryRenewList接口查询返回的visitid
        workresult: this.form1.workResultRecord, //"这里是录入的回访结果",
        worktype: this.form1.worktypeCode, //工作方式 5：电话联系客户 6：网络联系客户
      };
      this.api.saveVisitRecord(obj).then((res) => {
        if (res.code === 200) {
          this.$Message.info(res.msg);
          this.reset();
        }else{
           this.$Message.error(res.msg);
        }
      });
    },
    // 操作台显示
    show(index) {
      this.consoleIndex = index;
      if (index == 1) {
        this.isPhoneContact = true;
        this.isMessageContact = false;
        this.isInternetContact = false;
        this.isFaceContact = false;
      }
      if (index == 2) {
        this.isPhoneContact = false;
        this.isMessageContact = true;
        this.isInternetContact = false;
        this.isFaceContact = false;
      }
      if (index == 3) {
        this.isPhoneContact = false;
        this.isMessageContact = false;
        this.isInternetContact = true;
        this.isFaceContact = false;
      }
      if (index == 4) {
        this.isPhoneContact = false;
        this.isMessageContact = false;
        this.isInternetContact = false;
        this.isFaceContact = true;
      }
    },

    // iframe
    sentToIframe(number) {
      // console.log(this.$refs)
      let record = this.serviceRecord;
      let url =
        sessionStorage.getItem("userIp") +
        "api/work/phonework?useragentcode=" +
        sessionStorage.getItem("useragentcode") +
        "&workid=" +
        this.selection[this.tabIndex].workid +
        "&planid=" +
        this.selection[this.tabIndex].planid +
        "&persontype=" +
        this.callIndex +
        "&phoneno=" +
        number;
      this.callNum = number;
      // url;
      // this.$refs.callUpload.headers.Authorization = sessionStorage.getItem(
      //   "credentials"
      // );
      // console.log(this.$refs.callUpload.headers.Authorization);
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload.data.persontype = this.callIndex;
      // this.$refs.callUpload.data.phoneno = number;
      this.$refs.telIframe.contentWindow.getMessageFromParent(url);
    },
    uploadOk(refName) {
      // if(refName === "callUpload"){
      this.$refs[refName].handleClick();
      this.typeFlag = "";
      console.log(this.typeFlag, "确定");

      // }
    },
    onCancel() {
      this.typeFlag = "";
      console.log(this.typeFlag, "取消");
    },
    callbeforeUpload(file) {
      console.log(file, "file");
      this.file1 = file;
      // this.showModal = true
      this.callflag = "0";
      let number = this.isLocal0 + this.agent.mobile;
      this.uploadObj = {
        visitid: this.$route.query.visitid,
        contno: this.$route.query.contno,
        worktype: this.form1.worktypeCode,
        phoneno: number,
      };
      console.log(this.uploadObj, "uploadObj");
      // return
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },
    uploadVideo(file) {
      console.log(file, "方法");
      if (file.name.substr(file.name.lastIndexOf(".") + 1) !== "wav") {
        this.callUploadLoading = false;
        this.$Message.info(
          "文件格式错误" + file.name + " 格式错误, 请选择格式为wav"
        );
      } else {
        let url = "/api/visit/visitUpload";
        let formData = new FormData();
        formData.append("multipartFile", file);
        formData.append("visitid", this.uploadObj.visitid);
        formData.append("contno", this.uploadObj.contno);
        formData.append("worktype", this.uploadObj.worktype);
        formData.append("phoneno", this.uploadObj.phoneno);
        // return
        axios({
          url,
          method: "post",
          headers: {
            Authorization: sessionStorage.getItem("credentials"),
          },
          data: formData,
        }).then((result) => {
          if (result.data.code == 200) {
            console.log(result, "resultresult");
            if (this.callflag === "2" && !this.phoneNumber) {
            } else {
              this.$Message.info(result.data.msg);
            }
          } else {
            this.$Message.info(result.data.msg);
          }
        });
      }
    },
    callbeforeUpload2(file) {
      this.file1 = file;
      // this.showModal2 = true
      this.callflag = "1";
      let number = this.isLocal1 + this.customer.appntphone;
      this.uploadObj = {
        visitid: this.$route.query.visitid,
        contno: this.$route.query.contno,
        worktype: this.form1.worktypeCode,
        phoneno: number,
      };
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },

    callbeforeUpload3(file) {
      this.file1 = file;
      this.callflag = "2";
      if (this.phoneNumber) {
        // this.showModal3 = true
      } else {
        this.$Message.info("请输入手机号码");
        return;
      }
      let number = this.isLocal2 + this.phoneNumber;
      // this.authorization = sessionStorage.getItem("credentials");
      // this.$refs.callUpload3.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.callUpload3.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.callUpload3.data.persontype = "2";
      // this.$refs.callUpload3.data.phoneno = this.phoneNumber;
      // let promise = new Promise((resolve) => {
      //   this.$nextTick(function () {
      //     resolve(true);
      //   });
      // });
      this.uploadObj = {
        visitid: this.$route.query.visitid,
        contno: this.$route.query.contno,
        worktype: this.form1.worktypeCode,
        phoneno: number,
      };
      this.uploadVideo(file);
      return false; //通过返回一个promis对象解决
    },

    // 实时时间
    getTime() {
      let _this = this;
      let recoTime = "";
      this.interval = setInterval(function () {
        // _this.recordTimeStamp += 1000;
        // let time = new Date(_this.recordTimeStamp);
        // let h = time.getHours();
        // let m = time.getMinutes();
        // let s = time.getSeconds();
        // if (m < 10) {
        //   m = "0" + m;
        // }
        // if (s < 10) {
        //   s = "0" + s;
        // }
        // _this.recordTime = h ? h + ":" + m + ":" + s : m + ":" + s;

        // let s = parseInt((t / 1000) % 60)
        let start = _this.start;
        let end = new Date().getTime();
        let t = end - start;
        let h = parseInt((t / 1000 / 60 / 60) % 24);
        let m = parseInt((t / 1000 / 60) % 60);
        let s = parseInt((t / 1000) % 60);
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        console.log(m + ":" + s);
        // document.getElementById('time').innerText = m + ':' + s
        _this.recordTime = h ? h + ":" + m + ":" + s : m + ":" + s;
      }, 1000);
    },

    // 停止计时
    stopTime() {
      clearInterval(this.interval);
    },

    // 拨号
    callSomeone(index) {
      // if(this.callWay){

      // }else{

      // }
      let number = "";
      this.callIndex = index;
      if (index == 0) {
        this.typeFlag = "0";
        // console.log(this.agent.name, this.agent.mobile)
        number = this.isLocal0 + this.agent.mobile;
      } else if (index == 1) {
        this.typeFlag = "1";
        // console.log(this.customer.appntname, this.customer.appntphone)
        number = this.isLocal1 + this.customer.appntphone;
      } else if (index == 2) {
        if (this.phoneNumber) {
          this.typeFlag = "2";
        } else {
          this.$Message.info("请输入手机号码");
          return;
        }
        // console.log(this.phoneNumber)
        number = this.isLocal2 + this.phoneNumber;
      }

      this.iframeNum = number;
      // this.sentToIframe(this.iframeNum) //传值
      this.callModalShow = true;

      //计时器
      // let start = new Date().getTime()
      this.start = new Date().getTime();
      // document.getElementById('time').innerText = '00:00'
      this.recordTime = "00:00";
      this.getTime();
    },

    // 拨号弹窗关闭
    closeCallModel() {
      setTimeout(() => {
        console.log("拨号弹框关闭2861");
        this.callModalShow = false;
        this.stopTime();
        clearInterval(this.interval);
      }, 1000);
    },

    // 短信模板转换
    messageModelChange(index) {
      this.modelList.forEach((element) => {
        if (element.key == index) {
          this.messagePreveiwContent = element.content;
        }
      });
    },

    // 短信对象改变
    messagePersonChange(value) {
      if (value) {
        this.modelList = [];
        if (value == this.agent.agentcode) {
          this.persontype = 0;
        } else {
          this.persontype = 1;
        }
        let obj = {
          persontype: this.persontype,
          sendpersonid: value,
          planid: this.selection[this.tabIndex].planid
            ? this.selection[this.tabIndex].planid
            : null,
          workid: this.selection[this.tabIndex].workid
            ? this.selection[this.tabIndex].workid
            : null,
        };
        this.api.getMessageCodeMap(obj).then((res) => {
          if (res.code == 200 && res.data != null) {
            if (res.data.messageCodeMap) {
              res.data.messageCodeMap.forEach((element) => {
                this.modelList.push({
                  key: element.messagecode,
                  value: element.messagename,
                  content: element.messagevalue,
                });
              });
            }
          } else {
            this.$Message.info(res.msg);
          }
        });
      }
    },

    // 上传文件转到手动提交
    handleUpload(file) {
      // 保存需要上传的文件
      let keyID = Math.random().toString().substr(2);
      file["keyID"] = keyID;
      file["id"] = "";
      this.file.push(file);
      this.uploadFile.push(file);
      return false;
    },

    // 删除文件
    delectFile(keyID) {
      // 删除文件
      this.file = this.file.filter((item) => {
        // 删除已上传文件
        if (item.id != "" && item.keyID == keyID) {
          let obj = {
            planid: this.selection[this.tabIndex].planid,
            workid: this.selection[this.tabIndex].workid,
            controllerType: "1",
            delid: item.id,
          };
          this.api.donetwork(obj).then((res) => {
            if (res.code == 200) {
            } else {
            }
          });
        }
        return item.keyID != keyID;
      });
      this.uploadFile = this.uploadFile.filter((item) => {
        return item.keyID != keyID;
      });
    },

    // 上传文件
    upload() {
      console.log(this.$refs.upload, "this.$refs");
      this.$refs.upload.headers.Authorization =
        sessionStorage.getItem("credentials");

      // this.$refs.upload.data.planid = this.selection[this.tabIndex].planid;
      // this.$refs.upload.data.workid = this.selection[this.tabIndex].workid;
      // this.$refs.upload.data.controllerType = "0";

      // 上传文件
      if (this.uploadFile.length != 0) {
        this.uploadLoading = true;
        for (let i = 0; i < this.uploadFile.length; i++) {
          this.fileIndex1 = 0;
          let item = this.uploadFile[i];
          this.$refs.upload.post(item);
        }
      }
    },

    // 连不到后端的情况
    uploadFail(response, file, fileList) {
      this.fileIndex1++;
      this.file = this.file.filter((item) => {
        // uid为系统生成
        return item.uid != file.uid;
      });
      if (this.fileIndex1 == this.uploadFile.length) {
        this.uploadLoading = false;
        this.uploadFile = [];
      }
    },

    // 连接到后端
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      this.fileIndex1++;
      if (response.code == 200) {
        this.file.forEach((element) => {
          if (element.uid == file.uid) {
            element.id = response.data;
          }
        });
      } else {
        this.file = this.file.filter((item) => {
          return item.uid != file.uid;
        });
        this.$Message.info(file.name + response.msg);
      }
      if (this.fileIndex1 == this.uploadFile.length) {
        this.$Message.info("文件上传成功");
        this.uploadLoading = false;
        this.uploadFile = [];
      }
    },

    handleUpload2(file) {
      // 保存需要上传的文件
      let keyID = Math.random().toString().substr(2);
      file["keyID"] = keyID;
      file["id"] = "";
      this.file2.push(file);
      this.uploadFile2.push(file);
      return false;
    },

    delectFile2(keyID) {
      // 删除文件
      this.file2 = this.file2.filter((item) => {
        // 删除已上传文件
        if (item.id != "" && item.keyID == keyID) {
          let obj = {
            planid: this.selection[this.tabIndex].planid,
            workid: this.selection[this.tabIndex].workid,
            controllerType: "1",
            delid: item.id,
          };
          this.api.dointerviewwork(obj).then((res) => {
            if (res.code == 200) {
            } else {
            }
          });
        }
        return item.keyID != keyID;
      });
      this.uploadFile2 = this.uploadFile2.filter((item) => {
        return item.keyID != keyID;
      });
    },

    upload2() {
      // 上传文件
      this.$refs.upload2.headers.Authorization =
        sessionStorage.getItem("credentials");
      this.$refs.upload2.data.planid = this.selection[this.tabIndex].planid;
      this.$refs.upload2.data.workid = this.selection[this.tabIndex].workid;
      this.$refs.upload2.data.controllerType = "0";
      // 上传文件
      // console.log(this.$refs.upload2)
      if (this.uploadFile2.length != 0) {
        this.uploadLoading2 = true;
        for (let i = 0; i < this.uploadFile2.length; i++) {
          this.fileIndex2 = 0;
          let item = this.uploadFile2[i];
          // console.log(item)
          this.$refs.upload2.post(item);
        }
      }
    },

    uploadFail2(response, file, fileList) {
      this.fileIndex2++;
      this.file2 = this.file2.filter((item) => {
        return item.uid != file.uid;
      });
      if (this.fileIndex2 == this.uploadFile2.length) {
        this.uploadLoading2 = false;
        this.uploadFile2 = [];
      }
    },

    uploadSuccess2(response, file, fileList) {
      this.fileIndex2++;
      if (response.code == 200) {
        this.file2.forEach((element) => {
          if (element.uid == file.uid) {
            element.id = response.data;
          }
        });
      } else {
        this.file2 = this.file2.filter((item) => {
          return item.uid != file.uid;
        });
        this.$Message.info(file.name + response.msg);
      }
      if (this.fileIndex2 == this.uploadFile2.length) {
        this.$Message.info("文件上传成功");
        this.uploadLoading2 = false;
        this.uploadFile2 = [];
      }
    },

    // 相关保单对话框点击显示
    handleTabs() {
      if (this.contCount != 0) {
        this.aboutPolicy = true;
      }
      this.superviseData = [];
      let obj = {
        planid: this.selection[this.tabIndex].planid,
      };
      this.api.selectAboutlccont(obj).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.superviseData = res.data.records;
          this.superviseData.forEach((element) => {
            if (element.paytodate) {
              element.paytodate = element.paytodate.substr(0, 10);
            }
            if (element.payyear && element.payyears && element.payintvname) {
              element.paycount =
                element.payyear + "/" + element.payyears + element.payintvname;
            }
            if (element.appointeddate) {
              element.appointeddate = element.appointeddate.substr(0, 10);
            }
          });
        } else {
        }
      });
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.relatedSelection = selection;
    },

    // 相关保单批量处理
    relatedDeal() {
      if (this.relatedSelection.length > 0) {
        this.relatedSelection.forEach((element) => {
          let i = 0;
          this.selection.forEach((selectionElement) => {
            if (element.planid == selectionElement.planid) {
            } else {
              i++;
              if (i == this.selection.length) {
                this.selection.push(element);
              }
            }
          });
        });
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let arr = [];
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          this.tabLabel[index] = "保单：" + element.contno;
          arr.push("true");
          index++;
          if (index == this.selection.length) {
            this.tabStatus = arr;
          }
        });
        this.aboutPolicy = false;
        this.relatedSelection = [];
        if (this.countCopy <= 1) {
          this.close = false;
        } else {
          this.close = true;
        }
      } else {
        this.$Message.info("请选择数据");
      }
    },

    // 对话框关闭
    modalVisibleChange1(boo) {
      if (boo == false) {
        this.aboutPolicy = false;
      }
    },
    // 历史工作记录对话框点击显示
    historyWork() {
      this.historyWorkRecord = true;
      this.api.querymessagetoagent({ contno: this.tabValue[0] }).then((res) => {
        if (res.code == 200) {
          this.msgList = res.data.records;
        } else {
          this.$Message.info(res.msg);
        }
      });
    },
    // 对话框关闭
    modalVisibleChange2(boo) {
      if (boo == false) {
        this.historyWorkRecord = false;
      }
    },

    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid,
      });
      this.phoneRecordData = res.data;
      this.phoneRecordData.forEach((item) => {
        item.handleplayOrPause = false;
      });
      // console.log(this.phoneRecordData);
      this.phoneRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
      this.audioUrl.pause();
      this.phoneCCRecord = false;
    },
    // 短信内容对话框点击显示
    async messageContentShow({ plainid, workid }) {
      let res = await this.api.smsData({
        plainid,
        workid,
      });
      this.messageContentData = res.data;
      // console.log(res.data)
      this.messageContent = true;
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false;
    },

    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid,
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        } else {
          item.icon = "paper";
        }
      });
      // console.log(this.interviewData)
      this.interviewModal = true;
    },
    modalVisibleChange6() {
      this.interviewModal = false;
      // console.log(this.interviewModal, 1111111)
    },
    // 网络对话框
    async internetShow({ plainid, workid }) {
      let res = await this.api.internetPicturesInfo({
        plainid,
        workid,
      });
      this.internetData = res.data;
      this.internetData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        } else {
          item.icon = "paper";
        }
      });
      // console.log(this.internetData);
      this.internetModal = true;
    },
    modalVisibleChange7() {
      this.internetModal = false;
      // console.log(this.internetModal,1111111)
    },
    downloadCCPhoneRecord(url) {
      window.open(url);
    },
    downloadPhoneRecord(id) {
      let obj = {
        id,
        worktype: "phone",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype: "interview",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInternet(id) {
      let obj = {
        id,
        worktype: "net",
      };
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },

    // 星级改变
    rateChange(value) {
      if (value == 0) {
        this.isRate = true;
      } else {
        this.isRate = false;
      }
    },
    modalVisibleChange5(value) {
      if (this.callWay === "1") {
        // dcw 2021/2/23 替换成自己新封装的方法
        if (value) {
          if (this.iframeNum) {
            // 拨号
            console.log("startdial" + this.iframeNum);
            deviceapi.TV_StartDial(0, this.iframeNum);
            // 开始录音
            deviceapi.TV_StartRecordFile(0);
            // 打开耳机
            deviceapi.TV_EnableLine2Spk(0, 1);
            // 打开麦克风
            deviceapi.TV_EnableMic(0, 1);
          }
        } else {
          // 停止录音
          deviceapi.TV_StopRecordFile(0);
          // 关闭耳机
          deviceapi.TV_EnableLine2Spk(0, 0);
          // 关闭麦克风
          deviceapi.TV_EnableMic(0, 0);
          // 挂机
          deviceapi.TV_HangUpCtrl(0);
        }
      } else {
        if (value) {
          this.websocketsend("cmd:call " + this.iframeNum);
        } else {
          this.websocketsend("cmd:hang");
        }
      }

      /* 下面是iframe的，暂时不用
      if (value) {
        // console.log(this.iframeNum)
        // 给input赋值
        window.frames['frame'].document.getElementById(
          'dialcode'
        ).value = this.iframeNum
        // 调拨号
        window.frames['frame'].document.getElementById('callsb').onclick()
        // 调开始录音
        window.frames['frame'].document.getElementById('startRecord').onclick()
        // 调打开耳机
        window.frames['frame'].document.getElementById('openHeadset').onclick()
        // 调打开麦克
        window.frames['frame'].document.getElementById('openMic').onclick()
      }
      if (!value) {
        // 调结束录音
        window.frames['frame'].document.getElementById('endRecord').onclick()
        // 调关闭耳机
        window.frames['frame'].document.getElementById('closeHeadset').onclick()
        // 调关闭麦克
        window.frames['frame'].document.getElementById('closeMic').onclick()
        // 调挂机
        window.frames['frame'].document.getElementById('hangUp').onclick()
        // // 调上传
        // setTimeout(() => {
        //   window.frames['frame'].document.getElementById('upload').onclick()
        // }, 3000)
        this.callModalShow = false
      }
      */
    },
    //自己提交单选
    chargeRadioChange(type) {
      if (type == "submit") {
        this.reDatedisabled = true;
      }
      if (type == "replan") {
        this.reDatedisabled = false;
      }
    },
    // 判断短信条数
    judgeMessageCount() {
      this.sendMessageLoading = true;
      let obj = {
        messageid: this.message.messageModel,
        personid: this.message.messageToPerson,
        persontype: this.persontype,
        planid: this.selection[this.tabIndex].planid,
        workid: this.selection[this.tabIndex].workid,
      };
      // console.log(obj);
      this.api.domessageworkd(obj).then((res) => {
        this.sendMessageLoading = false;
        if (res.code == 200) {
          this.$Message.info("发送成功");
        } else {
          this.$Message.info(res.msg);
        }
      });
    },

    // 初始化
    variable() {
      // 网络联系地址
      // this.action1 = sessionStorage.getItem("userIp") + "api/visit/visitUpload";
      this.action1 = "/scrm-gateway/scrm-uer/api/visit/visitUpload";
      // console.log(this.action1);
      // 面访联系地址
      this.action2 =
        // sessionStorage.getItem("userIp") + "api/work/dointerviewwork";
        "/scrm-gateway/scrm-uer/api/work/dointerviewwork";

      // 设置下拉菜单
      if (this.insuranceType == "supervise") {
      }
      if (this.insuranceType == "charge") {
        // this.saleManInfo = false;
        // this.callBtnDisabled = true;
        // this.messageBtnDisabled = true;
      }
      if (this.insuranceType == "disabled") {
        // this.tabShow = false;
        this.ownComplete = true;
        // console.log(this.ownComplete);
        // this.couMoneyDisabled = true;
        // this.saleManInfo = false;
        if (this.selection.contLogo == "孤儿单") {
          // this.callBtnDisabled = true;
          // this.messageBtnDisabled = true;
        }
      }
      if (this.insuranceType == "assign") {
        if (this.selection.contno == null) {
          // this.couMoneyDisabled = true;
          this.assignContNoNotnull = false;
          this.show(3);
        }
        this.tabShow = false;
        this.assignTitle = true;
        this.ownComplete = true;
      }
      // 设置tab的数量、label和相应的contno存储
      if (this.selection && this.selection.length) {
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let arr = [];
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          if (this.insuranceType == "problem") {
            this.tabLabel[index] =
              "问题件编号：" +
              element.problemFileId +
              this.kg +
              "保单：" +
              element.contno;
          } else {
            this.tabLabel[index] = "保单：" + element.contno;
          }
          arr.push("true");
          index++;
          if (index == this.selection.length) {
            this.tabStatus = arr;
          }
        });
      } else {
        let arr = [];
        arr.push("true");
        this.tabStatus = arr;
        let selectionCopy = [];
        selectionCopy.push(this.selection);
        this.selection = selectionCopy;
        this.count = this.selection.length;
        this.countCopy = this.selection.length;
        let index = 0;
        this.selection.forEach((element) => {
          this.tabValue.push(element.contno);
          if (this.insuranceType == "problem") {
            this.tabLabel[index] =
              "问题件编号：" +
              element.problemFileId +
              this.kg +
              "保单：" +
              element.contno;
          } else {
            this.tabLabel[index] = "保单：" + element.contno;
          }
          index++;
        });
        //   this.count = 1;
        //   this.countCopy = 1;
        //   this.tabLabel[0] = "保单：" + this.selection.contno;
        //   this.tabValue.push(this.selection.contno);
      }
      // 若等于1，禁止关闭tab
      if (this.countCopy <= 1) {
        this.close = false;
      }

      // console.log(this.selection);
      if (this.insuranceType == "problem") {
        this.getProblemInfo();
      } else {
      }
      // 页面基础信息显示
    },

    // 问题回复提交
    problemSubmit() {
      if (!this.problemReview) {
        this.$Message.info("请先输入回复内容");
        return;
      }
      let obj = {
        replay: this.problemReview,
        rowId: this.recordVOS[this.recordVOS.length - 1].rowId,
      };
      this.api.replayProblemFile(obj).then((res) => {
        if (res.code === 200) {
          this.problemReview = "";
          this.getProblemInfo();
        } else {
          this.$Message.info(res.msg);
        }
      });
    },
    // 获取问题件详情
    async getProblemInfo() {
      let obj = {
        problemFileId: this.selection[0].problemFileId
          ? this.selection[0].problemFileId
          : null,
        contno: this.selection[0].contno ? this.selection[0].contno : null,
      };
      let res = await this.api.getProblemFileWorkDetail(obj);
      // 业务员信息
      if (res.data.agentdetail) {
        this.agent = res.data.agentdetail;
        this.agent.agentstate = this.agent.agentState;
        if (this.agent.agentCode && this.agent.agentName) {
          this.agent.agentName =
            this.agent.agentName + "-" + this.agent.agentCode;
        } else {
          this.agent.agentName = "";
        }
        if (this.agent.manageCom && this.agent.manageComName) {
          this.agent.managecom =
            this.agent.manageComName + "-" + this.agent.manageCom;
        } else {
          this.agent.managecom = "";
        }
      }
      // 保单信息
      if (res.data.contdetail) {
        this.cont = res.data.contdetail;
        this.subRisks = "";
        if (
          res.data.contdetail.subpol &&
          res.data.contdetail.subpol.length > 0
        ) {
          res.data.contdetail.subpol.forEach((element) => {
            this.subRisks += element.riskname + "-" + element.subprem + "<br>";
          });
        }
        if (this.cont.paytodate) {
          this.cont.paytodate = this.cont.paytodate.substr(0, 10);
        } else {
          this.cont.paytodate = "";
        }
        if (this.cont.payyear && this.cont.payyears && this.cont.payintvname) {
          this.cont.payCount =
            this.cont.payyear +
            "/" +
            this.cont.payyears +
            this.cont.payintvname;
        } else {
          this.cont.payCount = "";
        }
        // 投/被保人信息
        if (res.data.customerdetail) {
          this.customer = res.data.customerdetail;
        }
        // 沟通信息
        if (res.data.recorddetail.recordVOS) {
          this.recordVOS = res.data.recorddetail.recordVOS;
        }
      }
    },
    async getTotal({ planid, contno, paytodate }) {
      console.log();
      let res = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate,
      });
      if (res.data) {
        this.historyCount = res.data.length;
      }
      this.serviceRecord = res.data;
      let res2 = await this.api.selectallworkdetail({ contno });
      let CCrecord = [];
      // $.ajax("/scrm-gateway/scrm-uer/api/ccRecord/selectCCRecord/" + contno, {
      //   method: "get",
      //   contentType: "application/json;charset=utf-8",
      //   headers: {
      //     Authorization: sessionStorage.getItem("credentials"),
      //   },
      //   success: (result) => {
      //     if (result.code == 200 && result.data != null) {
      //       CCrecord = result.data;
      //       let serviceRecord2 = res2.data
      //         ? res2.data.allProfessionalWorkdetail
      //         : [[]];
      //       console.log(this.$route.query.selection, "CCrecord");
      //       if (CCrecord.length != 0) {
      //         CCrecord.forEach((item, index) => {
      //           item.updateTime = item.subtime;
      //           item.worktype = "客服电话联系客户";
      //           item.infoType = "CC";
      //           item.payyear = String(this.$route.query.selection.payyear);
      //           item.payyears = this.$route.query.selection.payyears;
      //           item.payintv = this.$route.query.selection.payintvname;
      //           serviceRecord2[0].push(item);
      //         });
      //         serviceRecord2[0].sort(function (a, b) {
      //           return b.updateTime < a.updateTime ? -1 : 1;
      //         });
      //       }
      //       this.historyCount = serviceRecord2[0].length;
      //       this.serviceRecord2 = serviceRecord2;
      //     } else {
      //       CCrecord = [];
      //       this.serviceRecord2 = res2.data
      //         ? res2.data.allProfessionalWorkdetail
      //         : [];
      //     }
      //   },
      //   error: (result) => {
      //     this.$Message.error(result.msg);
      //   },
      // });

      // console.log(this.serviceRecord, "交办件信息");
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime);
      // console.log("imageUrl",imageUrl)
      document.getElementsByClassName("ivu-card-body")[0].style.background =
        "url(" + imageUrl + ") left top repeat";
    },
    T_GetEvent(uID, uEventType, uHandle, uResult, szdata) {
      let self = this;
      console.log(uEventType);
      //var vValueArray=qnviccub.QNV_Event(0,2,0,"","",1024);
      if (uEventType == -1) return;
      var vValue =
        " type=" +
        uEventType +
        " Handle=" +
        uHandle +
        " Result=" +
        uResult +
        " szdata=" +
        szdata;
      switch (uEventType) {
        case deviceapi.BriEvent_PhoneHook: // 本地电话机摘机事件
          // AppendStatusEx(uID, "本地电话机摘机" + vValue);
          break;
        case deviceapi.BriEvent_PhoneDial: // 只有在本地话机摘机，没有调用软摘机时，检测到DTMF拨号
          // AppendStatusEx(uID, "本地话机拨号" + vValue);
          break;
        case deviceapi.BriEvent_PhoneHang: // 本地电话机挂机事件
          // TV_HangUpCtrl(uID);
          // AppendStatusEx(uID, "本地电话机挂机" + vValue);
          self.closeCallModel();
          break;
        case deviceapi.BriEvent_CallIn: // 外线通道来电响铃事件
          // AppendStatusEx(uID, "外线通道来电响铃事件" + vValue);
          break;
        case deviceapi.BriEvent_GetCallID: //得到来电号码
          // AppendStatusEx(uID, "得到来电号码" + vValue);
          break;
        case deviceapi.BriEvent_StopCallIn: // 对方停止呼叫(产生一个未接电话)
          // AppendStatusEx(uID, "对方停止呼叫(产生一个未接电话)" + vValue);
          break;
        case deviceapi.BriEvent_DialEnd: // 调用开始拨号后，全部号码拨号结束
          // AppendStatusEx(uID, "调用开始拨号后，全部号码拨号结束" + vValue);
          break;
        case deviceapi.BriEvent_PlayFileEnd: // 播放文件结束事件
          // AppendStatusEx(uID, "播放文件结束事件" + vValue);
          break;
        case deviceapi.BriEvent_PlayMultiFileEnd: // 多文件连播结束事件
          // AppendStatusEx(uID, "多文件连播结束事件" + vValue);
          break;
        case deviceapi.BriEvent_PlayStringEnd: //播放字符结束
          // AppendStatusEx(uID, "播放字符结束" + vValue);
          break;
        case deviceapi.BriEvent_RepeatPlayFile: // 播放文件结束准备重复播放
          // AppendStatusEx(uID, "播放文件结束准备重复播放" + vValue);
          break;
        case deviceapi.BriEvent_SendCallIDEnd: // 给本地设备发送震铃信号时发送号码结束
          // AppendStatusEx(uID, "给本地设备发送震铃信号时发送号码结束" + vValue);
          break;
        case deviceapi.BriEvent_RingTimeOut: //给本地设备发送震铃信号时超时
          // AppendStatusEx(uID, "给本地设备发送震铃信号时超时" + vValue);
          break;
        case deviceapi.BriEvent_Ringing: //正在内线震铃
          // AppendStatusEx(uID, "正在内线震铃" + vValue);
          break;
        case deviceapi.BriEvent_Silence: // 通话时检测到一定时间的静音.默认为5秒
          // AppendStatusEx(uID, "通话时检测到一定时间的静音" + vValue);
          break;
        case deviceapi.BriEvent_GetDTMFChar: // 线路接通时收到DTMF码事件
          // AppendStatusEx(uID, "线路接通时收到DTMF码事件" + vValue);
          break;
        case deviceapi.BriEvent_RemoteHook: // 拨号后,被叫方摘机事件
          // AppendStatusEx(uID, "拨号后,被叫方摘机事件" + vValue);
          break;
        case deviceapi.BriEvent_RemoteHang: //对方挂机事件
          // TV_HangUpCtrl(uID);
          self.closeCallModel();
          // AppendStatusEx(uID, "对方挂机事件" + vValue);
          break;
        case deviceapi.BriEvent_Busy: // 检测到忙音事件,表示PSTN线路已经被断开
          // AppendStatusEx(uID, "检测到忙音事件,表示PSTN线路已经被断开" + vValue);
          break;
        case deviceapi.BriEvent_DialTone: // 本地摘机后检测到拨号音
          // AppendStatusEx(uID, "本地摘机后检测到拨号音" + vValue);
          break;
        case deviceapi.BriEvent_RingBack: // 电话机拨号结束呼出事件。
          // AppendStatusEx(uID, "电话机拨号结束呼出事件" + vValue);
          break;
        case deviceapi.BriEvent_MicIn: // MIC插入状态
          // AppendStatusEx(uID, "MIC插入状态" + vValue);
          break;
        case deviceapi.BriEvent_MicOut: // MIC拔出状态
          // AppendStatusEx(uID, "MIC拔出状态" + vValue);
          break;
        case deviceapi.BriEvent_FlashEnd: // 拍插簧(Flash)完成事件，拍插簧完成后可以检测拨号音后进行二次拨号
          // AppendStatusEx(uID, "拍插簧(Flash)完成事件，拍插簧完成后可以检测拨号音后进行二次拨号" + vValue);
          break;
        case deviceapi.BriEvent_RefuseEnd: // 拒接完成
          // AppendStatusEx(uID, "拒接完成" + vValue);
          break;
        case deviceapi.BriEvent_SpeechResult: // 语音识别完成
          // AppendStatusEx(uID, "语音识别完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxRecvFinished: // 接收传真完成
          // AppendStatusEx(uID, "接收传真完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxRecvFailed: // 接收传真失败
          // AppendStatusEx(uID, "接收传真失败" + vValue);
          break;
        case deviceapi.BriEvent_FaxSendFinished: // 发送传真完成
          // AppendStatusEx(uID, "发送传真完成" + vValue);
          break;
        case deviceapi.BriEvent_FaxSendFailed: // 发送传真失败
          // AppendStatusEx(uID, "发送传真失败" + vValue);
          break;
        case deviceapi.BriEvent_OpenSoundFailed: // 启动声卡失败
          // AppendStatusEx(uID, "启动声卡失败" + vValue);
          break;
        case deviceapi.BriEvent_UploadSuccess: //远程上传成功
          // AppendStatusEx(uID, "远程上传成功" + vValue);
          break;
        case deviceapi.BriEvent_UploadFailed: //远程上传失败
          // AppendStatusEx(uID, "远程上传失败" + vValue);
          break;
        case deviceapi.BriEvent_EnableHook: // 应用层调用软摘机/软挂机成功事件
          // AppendStatusEx(uID, "应用层调用软摘机/软挂机成功事件" + vValue);
          break;
        case deviceapi.BriEvent_EnablePlay: // 喇叭被打开或者/关闭
          // AppendStatusEx(uID, "喇叭被打开或者/关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableMic: // MIC被打开或者关闭
          // AppendStatusEx(uID, "MIC被打开或者关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableSpk: // 耳机被打开或者关闭
          // AppendStatusEx(uID, "耳机被打开或者关闭" + vValue);
          break;
        case deviceapi.BriEvent_EnableRing: // 电话机跟电话线(PSTN)断开/接通
          // AppendStatusEx(uID, "电话机跟电话线(PSTN)断开/接通" + vValue);
          break;
        case deviceapi.BriEvent_DoRecSource: // 修改录音源
          // AppendStatusEx(uID, "修改录音源" + vValue);
          break;
        case deviceapi.BriEvent_DoStartDial: // 开始软件拨号
          // AppendStatusEx(uID, "开始软件拨号" + vValue);
          break;
        case deviceapi.BriEvent_RecvedFSK: // 接收到FSK信号，包括通话中FSK/来电号码的FSK
          // AppendStatusEx(uID, "接收到FSK信号，包括通话中FSK/来电号码的FSK" + vValue);
          break;
        case deviceapi.BriEvent_PlugOut:
          // AppendStatusEx(uID, "设备移除");
          handleException();
          break;
        case deviceapi.BriEvent_DevErr: //设备错误
          // AppendStatusEx(uID, "设备错误" + decodeURIComponent(vValue));
          break;
        default:
          // if (uEventType < BriEvent_EndID)
          // AppendStatusEx(uID, "忽略其它事件发生:ID=" + uEventType + vValue);
          break;
      }
    },

    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:3001";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.callWay = "0";
    },
    websocketonerror() {
      //连接建立失败重连
      // this.initWebSocket();
      this.callWay = "1";

      // 添加自定义的方法 2021/2/23 dcw
      let iVer = 1; //第一个版本
      let self = this;
      deviceapi.check_ver(iVer, function (nRet) {
        console.log(nRet);
        if (nRet == deviceapi.W_OK) {
          deviceapi.TV_Initialize(function () {
            self.callBtnDisabled = false;
          });
          // deviceapi.getEvent(self.T_GetEvent);
        }
      });
    },
    websocketonmessage(e) {
      let domArr = document.querySelectorAll(".ivu-upload-input");
      console.log(e, "eeee");
      //数据接收
      // if(!(e.data ==="event:hang" &&  this.dataFlag === "event:hang")){
      if (e.data === "err:忙音,请挂电话") {
        // console.log(domArr[0].click(),"{domArr}")
        console.log("页面断开连接");
        this.stopTime();
        clearInterval(this.interval);
        this.callModalShow = false;
      } else if (e.data == "event:ready") {
        // 连接成功，
        this.callBtnDisabled = false;
      } else if (e.data == "event:hang") {
        // 挂断
        console.log("websock断开连接", this.typeFlag);
        if (this.typeFlag === "0") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal = true;
        } else if (this.typeFlag === "1") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal2 = true;
        } else if (this.typeFlag === "2") {
          this.stopTime();
          clearInterval(this.interval);
          this.callModalShow = false;
          this.showModal3 = true;
        } else {
          this.showModal1 = false;
          this.showModal2 = false;
          this.showModal3 = false;
        }
      }
      this.dataFlag = e.data;
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
      // console.log("qqq",Data)
    },
    websocketclose(e) {
      //关闭
      // console.log('断开连接',e);
    },
    checkline() {
      // $.ajax(
      //   "../api/user/checkline/" + sessionStorage.getItem("useragentcode"),
      //   {
      //     method: "put",
      //     contentType: "application/json;charset=utf-8",
      //     beforeSend: function (xhr) {
      //       xhr.setRequestHeader(
      //         "Authorization",
      //         sessionStorage.getItem("credentials")
      //       );
      //     },
      //     success: (res) => {
      //       if (res.code === 200) {
      //         this.isInnerLine = res.data;
      //       }
      //     },
      //     error: (res) => {
      //       this.$Message.info(res.msg);
      //     },
      //   }
      // );
    },
    // 续期专员信息
    renEwal() {
      console.log(this.$route.query.reagentCode, "111");
      this.api
        .workStatusBasicStatisticsInfo1({
          reagentcode: this.$route.query.reagentCode,
        })
        .then((res) => {
          if (res.code === 200) {
            this.basicInformation1 = res.data;
          }
        });
    },
    // 回放登记信息
    paYinfo() {
      let obj = {
        contno: this.$route.query.contno,
        paytodate: this.$route.query.paytodate,
      };
      this.api.getVisitBackDetail(obj).then((res) => {
        if (res.code === 200) {
          this.agent = res.data.visitBackAgent;
          this.cont = res.data.visitBackCont;
          //附加险
          this.subpol1 = res.data.visitBackCont.subpol[0] || [];
          this.customer = res.data.visitBackCustomer;
          this.selsetvisitBaseMapVO = res.data.visitBaseMapVO;
          if (this.agent.agentState === "01") {
            this.agentstateName = "在职";
            this.StateType = "success";
          } else if (this.agent.agentState === "02") {
            this.agentstateName = "二次入司";
            this.StateType = "default";
          } else if (this.agent.agentState === "03") {
            this.agentstateName = "离职";
            this.StateType = "error";
          }
        }
        console.log(res, "业务员信息");
      });
    },
  },

  mounted() {
    // 重新实现了接口 2021/2/23 dcw
    // setTimeout(()=>{
    //   this.iframeNeedReloaded = true;
    // },20)
    console.log(this.$route.query);
    console.log(this.selection, "this.selection");
    this.userCode = sessionStorage.getItem("useragentcode");
    this.variable();
    this.checkline();
    if (this.insuranceType !== "problem") {
      this.getTotal(this.selection[0]);
    }
    this.authorization = sessionStorage.getItem("credentials");
    // this.callaction = sessionStorage.getItem("userIp") + "api/work/phonework";
    this.callaction = "/scrm-gateway/scrm-uer/api/work/phonework";
    // console.log(this.$route.query.selection)

    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      new Date().getDate();
    this.draw(this.$refs.myCanvas, loginUser, loginTime);

    this.initWebSocket();
    this.renEwal();
    this.paYinfo();
  },
  destroyed() {
    console.log("dest");
    if (this.callWay === "0") {
      // this.websocketclose()
      this.websock.close();
    } else {
      // 页面刷新前关闭所有设备
      deviceapi.CloseDevice(0xff, function (nResult) {
        console.log("关闭设备完成.");
      });
    }
  },
  beforeMount() {
    this.iframeNeedReloaded = false;
    this.insuranceType = this.$route.query.insuranceType;
    console.log(this.insuranceType);
    this.selection = this.$route.query;
    console.log(this.selection, "1111");
    if (this.insuranceType == "assign") {
      this.chargeDifficultDisabled = true;
    }
  },
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ivu-upload-drag:hover {
  border: none;
}
.ivu-upload-drag {
  border: none;
}
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon .ivu-icon-ios-close {
  color: #fff !important;
}
.ivu-modal-header p,
.ivu-modal-header-inner {
  color: white !important;
}
.tableExcel > table {
  width: 100%;
  border-right: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-collapse: collapse;
  margin: auto;
}
.tableExcel > table td {
  border-left: 1px solid #e8eaec;
  border-top: 1px solid #e8eaec;
  white-space: nowrap;
  padding: 0.5rem;
}
.tableExcel > tbody tr:nth-of-type(1) {
  font-weight: bold;
  font-size: 13px;
}
</style>
